<script>
import { GlBadge, GlButton } from '@gitlab/ui';
import { s__, sprintf, n__ } from '~/locale';
import { getAccessLevels } from '../../../utils';

export const i18n = {
  defaultLabel: s__('BranchRules|default'),
  protectedLabel: s__('BranchRules|protected'),
  detailsButtonLabel: s__('BranchRules|View details'),
  allowForcePush: s__('BranchRules|Allowed to force push'),
  codeOwnerApprovalRequired: s__('BranchRules|Requires CODEOWNERS approval'),
  statusChecks: s__('BranchRules|%{total} status %{subject}'),
  approvalRules: s__('BranchRules|%{total} approval %{subject}'),
  matchingBranches: s__('BranchRules|%{total} matching %{subject}'),
  pushAccessLevels: s__('BranchRules|Allowed to merge'),
  mergeAccessLevels: s__('BranchRules|Allowed to push and merge'),
};

export default {
  name: 'BranchRule',
  i18n,
  components: {
    GlBadge,
    GlButton,
  },
  inject: {
    branchRulesPath: {
      default: '',
    },
    showCodeOwners: { default: false },
    showStatusChecks: { default: false },
    showApprovers: { default: false },
  },
  props: {
    name: {
      type: String,
      required: true,
    },
    isDefault: {
      type: Boolean,
      required: false,
      default: false,
    },
    branchProtection: {
      type: Object,
      required: false,
      default: () => {},
    },
    statusChecksTotal: {
      type: Number,
      required: false,
      default: 0,
    },
    approvalRulesTotal: {
      type: Number,
      required: false,
      default: 0,
    },
    matchingBranchesCount: {
      type: Number,
      required: false,
      default: 0,
    },
  },
  computed: {
    isWildcard() {
      return this.name.includes('*');
    },
    isProtected() {
      return Boolean(this.branchProtection);
    },
    hasApprovalDetails() {
      return this.approvalDetails.length;
    },
    detailsPath() {
      return `${this.branchRulesPath}?branch=${encodeURIComponent(this.name)}`;
    },
    statusChecksText() {
      return sprintf(this.$options.i18n.statusChecks, {
        total: this.statusChecksTotal,
        subject: n__('check', 'checks', this.statusChecksTotal),
      });
    },
    approvalRulesText() {
      return sprintf(this.$options.i18n.approvalRules, {
        total: this.approvalRulesTotal,
        subject: n__('rule', 'rules', this.approvalRulesTotal),
      });
    },
    matchingBranchesText() {
      return sprintf(this.$options.i18n.matchingBranches, {
        total: this.matchingBranchesCount,
        subject: n__('branch', 'branches', this.matchingBranchesCount),
      });
    },
    mergeAccessLevels() {
      const { mergeAccessLevels } = this.branchProtection || {};
      return this.getAccessLevels(mergeAccessLevels);
    },
    pushAccessLevels() {
      const { pushAccessLevels } = this.branchProtection || {};
      return this.getAccessLevels(pushAccessLevels);
    },
    pushAccessLevelsText() {
      return this.getAccessLevelsText(this.$options.i18n.pushAccessLevels, this.pushAccessLevels);
    },
    mergeAccessLevelsText() {
      return this.getAccessLevelsText(this.$options.i18n.mergeAccessLevels, this.mergeAccessLevels);
    },
    approvalDetails() {
      const approvalDetails = [];
      if (this.isWildcard || this.matchingBranchesCount > 1) {
        approvalDetails.push(this.matchingBranchesText);
      }
      if (this.branchProtection?.allowForcePush) {
        approvalDetails.push(this.$options.i18n.allowForcePush);
      }
      if (this.showCodeOwners && this.branchProtection?.codeOwnerApprovalRequired) {
        approvalDetails.push(this.$options.i18n.codeOwnerApprovalRequired);
      }
      if (this.showStatusChecks && this.statusChecksTotal) {
        approvalDetails.push(this.statusChecksText);
      }
      if (this.showApprovers && this.approvalRulesTotal) {
        approvalDetails.push(this.approvalRulesText);
      }
      if (this.mergeAccessLevels.total > 0) {
        approvalDetails.push(this.mergeAccessLevelsText);
      }
      if (this.pushAccessLevels.total > 0) {
        approvalDetails.push(this.pushAccessLevelsText);
      }
      return approvalDetails;
    },
  },
  methods: {
    getAccessLevels,
    getAccessLevelsText(beginString = '', accessLevels) {
      const textParts = [];
      if (accessLevels.roles.length) {
        textParts.push(n__('1 role', '%d roles', accessLevels.roles.length));
      }
      if (accessLevels.groups.length) {
        textParts.push(n__('1 group', '%d groups', accessLevels.groups.length));
      }
      if (accessLevels.users.length) {
        textParts.push(n__('1 user', '%d users', accessLevels.users.length));
      }
      return `${beginString}: ${textParts.join(', ')}`;
    },
  },
};
</script>

<template>
  <li>
    <div
      class="gl-display-flex gl-justify-content-space-between"
      data-qa-selector="branch_content"
      :data-qa-branch-name="name"
    >
      <div>
        <strong class="gl-font-monospace">{{ name }}</strong>

        <gl-badge v-if="isDefault" variant="info" size="sm" class="gl-ml-2">{{
          $options.i18n.defaultLabel
        }}</gl-badge>

        <gl-badge v-if="isProtected" variant="success" size="sm" class="gl-ml-2">{{
          $options.i18n.protectedLabel
        }}</gl-badge>

        <ul v-if="hasApprovalDetails" class="gl-pl-6 gl-mt-2 gl-mb-0 gl-text-gray-500">
          <li v-for="(detail, index) in approvalDetails" :key="index">{{ detail }}</li>
        </ul>
      </div>
      <gl-button
        class="gl-align-self-start"
        category="tertiary"
        size="small"
        data-qa-selector="details_button"
        :href="detailsPath"
      >
        {{ $options.i18n.detailsButtonLabel }}</gl-button
      >
    </div>
  </li>
</template>
